<template>
  <div class="pageleft flexcolumn h_full">
    <div class="p-16 pb-0">
      <div class="flexbetween">
        <div class="c_text2 mb-10 f-14">分组</div>
      </div>
      <div
        v-hasPermi="['system:reply:addgroup']"
        class="addbtngroup flexcenter commhover f-14 mb-8"
        @click="handleAdd()"
      >
        <i class="el-icon-plus mr-10 f-16"></i>
        新分组
      </div>
    </div>
    <div class="left_body">
      <div
        class="role_item commhover flexbetween f-14"
        :class="{ active: active == -2 }"
        @click="handleItem({ id: -2 })"
      >
        <div class="flex aligncenter w_full">
          <svg-icon class-name="mr-26 f-14" icon-class="icontent" />
          <div class="role-title c_text f-13">全部话术</div>
        </div>
      </div>
      <div
        class="role_item commhover flexbetween f-14"
        :class="{ active: active == -1 }"
        @click="handleItem({ id: -1 })"
      >
        <div class="flex aligncenter w_full">
          <svg-icon class-name="mr-26 f-14 c_ccc" icon-class="sort" />
          <div class="role-title c_text f-13">默认分组</div>
        </div>
      </div>
      <el-tree
        v-loading="loading"
        ref="draggtree"
        :data="groupList"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        @node-drag-start="handleDragStart"
        @node-drop="handleDrop"
        :draggable="true"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        class="dragtree"
      >
        <div
          class="role_item commhover flexbetween f-14"
          slot-scope="{ node, data }"
          :class="{ active: active == data.id }"
          @click="handleItem(data)"
        >
          <div class="flex aligncenter w_full">
            <svg-icon class-name="mr-26 draggericon f-14" icon-class="sort" />
            <!-- <svg-icon class-name="mr-26 draggericon f-12" icon-class="ilist" /> -->
            <div class="role-title c_text f-13">{{ data.groupName }}</div>
          </div>
          <el-dropdown @command="handleCommand($event, data)">
            <svg-icon icon-class="more" class-name="commhover roleicon f-15" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a" v-if="node.level == 1" v-hasPermi="['system:reply:addgroup']">添加分组</el-dropdown-item>
              <el-dropdown-item command="b" v-hasPermi="['system:reply:editgroup']">修改</el-dropdown-item>
              <el-dropdown-item command="c" v-hasPermi="['system:reply:deletegroup']">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-tree>

      <!-- <div
        class="role_item commhover flexbetween f-14"
        v-for="(item, index) in groupList"
        :key="index"
        :class="{ active: active == item.id }"
        @click="handleItem(item)"
      >
        <div class="flex aligncenter w_full">
          <svg-icon class-name="mr-26 f-14" icon-class="ilist" />
          <div class="role-title c_text f-14">{{ item.name }}</div>
        </div>
        <el-dropdown @command="handleCommand">
          <svg-icon icon-class="more" class-name="commhover roleicon f-15" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">添加分组</el-dropdown-item>
            <el-dropdown-item command="b">修改</el-dropdown-item>
            <el-dropdown-item command="c">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->
    </div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      :close-on-click-modal='false'
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="分组名称：" prop="groupName">
          <el-input
            v-model="form.groupName"
            size="small"
            maxlength="10"
            placeholder="请输入分组名称，不超过10个字"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="subloading"
          @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  scriptGroupList,
  addScriptGroup,
  delScriptGroup,
  updateScriptGroup
} from "@/api/market/reply";
export default {
  data() {
    return {
      groupList: [
        // { name: "管理员", id: 1 },
        // { name: "成员", id: 2 },
      ],
      queryParams: {
        pageSize: 9999,
        pageNum: 1,
        repoType: 1,
      },
      loading:false,
      draggingNode: null,
      defaultProps: {
        children: "children",
        label: "groupName",
      },
      active: -2, //默认为全部
      title: "",
      open: false,
      form: {
        id: undefined,
        parentGroupId: -1,
        groupName: "",
        repoType: "",
      },
      rules: {
        groupName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      subloading: false,
    };
  },
  props: {
    repoType: {
      require: true,
      default: 1,
    },
  },
  created() {
    this.queryParams.repoType = this.repoType;
    this.form.repoType = this.repoType;
    this.getScriptGroupList();
  },
  methods: {
    getScriptGroupList() {
      this.loading = true;
      scriptGroupList(this.queryParams)
        .then((res) => {
          this.groupList = this.handleTree(res.rows, "id", "parentGroupId");
          this.loading = false;
          this.handleItem({ id: -2 });
          console.log('this.loadingthen：', this.loading)
        })
        .catch(() => {
          this.loading = false;
          console.log('this.loadingcatch：', this.loading)
        });
    },

    handleDragStart(node, ev) {
      console.log("drag start", node);
      this.draggingNode = node;
    },

    // 拖拽成功完成
    //draggingNode当前正拖拽的节点 dropNode目标节点|参考节点 dropType拖拽到参考节点的哪个位置 ev事件对象
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log(draggingNode, dropNode, dropType, ev);
      if (this.draggingNode) {
        // 在此处可以根据业务需求，更新数据源或者调用API进行相应的操作
        console.log("拖放完成！");
        console.log("被拖动的节点：", this.draggingNode);
        console.log("接收拖放的节点：", dropNode);
      }
      this.draggingNode = null;
    },

    // 拖拽时判定目标节点能否被放置
    allowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode.level, dropNode.level);
      //注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        return type === "prev" || type === "next";
      } else {
        // 不同级进行处理
        return false;
      }
    },

    allowDrag(node) {
      return true;
    },

    handleItem(item) {
      this.active = item.id;
      // console.log(this.active, nodex)
      this.$emit("handleItem", item);
    },

    handleAdd(item) {
      this.title = "新建分组";
      this.form.parentGroupId = -1;
      if (item) {
        this.form.parentGroupId = item.id;
      }
      console.log("this.form：", item, this.form);
      this.open = true;
    },

    handleEdit(item){
      this.form.id = item.id
      this.form.parentGroupId = item.parentGroupId
      this.form.groupName = item.groupName
      this.title = "编辑分组";
      this.open = true;
    },

    handleClose() {
      this.open = false;
      this.form.id = undefined
      this.form.groupName = "";
      this.form.parentGroupId = -1;
    },

    handleCommand(command, item) {
      console.log("command:", command);
      switch (command) {
        case "a":
          this.handleAdd(item);
          break;
        case "b":
          this.handleEdit(item)
          break;
        case "c":
          this.handleDelete(item);
          break;
        default:
          break;
      }
    },

    handleDelete(row) {
      this.$msgBox
        .showMsgBox({
          title: "提示？",
          content: "删除后将无法恢复，是否确认删除？",
        })
        .then(() => {
          delScriptGroup(row.id).then(() => {
            this.$message.success("删除成功!");
            this.getScriptGroupList();
          });
        })
        .catch(() => {});
    },

    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.subloading = true;
        if (this.form.id) {
          updateScriptGroup(this.form)
            .then((res) => {
              this.$message.success("编辑成功");
              this.handleClose();
              this.getScriptGroupList();
              this.subloading = false;
            })
            .catch(() => {
              this.subloading = false;
            });
        } else {
          addScriptGroup(this.form)
            .then(() => {
              this.$message.success("添加成功");
              this.handleClose();
              this.getScriptGroupList();
              this.subloading = false;
            })
            .catch((e) => {
              this.subloading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pageleft {
  width: 300px;
  border-right: 1px solid #f0f0f0;
}
.left_body {
  height: calc(100% - 85px);
  overflow-y: auto;
  padding: 0 16px 16px;
}
.addbtngroup {
  height: 32px;
  padding: 4px 15px;
  border: 1px dashed #e9e9e9;
  border-radius: 4px;
}
.btnadd {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
}

.dragtree {
  ::v-deep .el-tree-node__content {
    height: 40px;
    border-radius: 4px;
    background-color: transparent;
    &:hover,
    &:visited,
    &:focus,
    &:active {
      background-color: transparent;
    }
  }
  ::v-deep .el-tree-node__expand-icon {
    position: absolute;
    left: 28px;
    z-index: 1;
  }
}
.role_item {
  width: 100%;
  border-radius: 4px;
  position: relative;
  height: 40px;
  padding: 0 12px;
  padding-right: 6px;
  margin-bottom: 6px;

  &.active {
    background-color: #ebf2ff;
  }
  &:hover {
    background-color: #f0f0f0;
  }
  .roleicon {
    display: none;
  }

  &:hover .roleicon {
    display: inline;
  }
}
.role-title {
  width: 72%;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
  padding-left: 8px;
}
</style>